<template>
  <div class="dialog">
    <el-dialog
      :title="titleText"
      :visible.sync="showDialog"
      width="35%"
      top="0"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div v-loading="loadFilesing">
        <!-- <img
          v-for="(item, index) in pictureList"
          :key="index"
          :src="item.pictureData? 'data:application/*;base64,' + item.pictureData : item.url"
          class="picture-con"
        />-->
        <el-image
          class="picture-con"
          v-if="pictureList[0]"
          :src="pictureList[0]&&pictureList[0].url"
          :preview-src-list="pictureList.map(item => item.url)"
        ></el-image>
        <img
          v-for="(item, index) in pdfList"
          :key="index"
          :src="'data:application/pdf;base64,' + item.url"
          class="picture-con"
          @click="click(item.url)"
        />
        <p
          v-if="pictureList.length === 0 && !loadFilesing"
          class="hang-font"
        >暂无内容</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="cancel()">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import failureToReportApi from "@/api/equip-repair-manage/failure-to-report";
import repairHistory from "@/api/equip-repair-manage/repair-history/index";
export default {
  name: "",
  components: {},
  props: {
    // 弹框名称
    titleText: {
      type: String,
      default: "",
    },
    show: {
      type: Boolean,
      default: false,
    },
    editObject: {
      type: [Object],
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      showDialog: this.show,
      pictureList: [],
      pdfList: [],
      loadFilesing: false,
    };
  },

  watch: {
    show(v) {
      this.showDialog = v;
    },
    editObject() {},
    titleText(v) {
      if (v && (v === "故障图片" || v === "维修图片" || v === "点检结果图片")) {
        // console.log(v);
        this.pictureList = [];
        this.pdfList = [];
        this.query();
      }
    },
  },
  created() {},
  mounted() {},
  methods: {
    query() {
      // 获取数据
      if (this.titleText === "故障图片") {
        if (this.editObject.hitchInfoCode) {
          this.loadFilesing = true;
          failureToReportApi
            .queryByHitchInfoId(this.editObject.hitchInfoCode)
            .then((res) => {
              if (res.code === 1) {
                let data = res.data || [];
                this.pictureList = [];
                this.pdfList = [];
                if (data) {
                  data.forEach((a) => {
                    // if (
                    //   a.pictureType === "image/png" ||
                    //   a.pictureType === "image/jpg" ||
                    //   a.pictureType === "image/jpeg"
                    // ) {
                    //   this.pictureList.push(a);
                    // }
                    if (a.pictureType === "application/pdf") {
                      a.url = this.deal(a["pictureData"]);
                      this.pdfList.push(a);
                    } else {
                      this.pictureList.push(a);
                    }
                  });
                }
                this.loadFilesing = false;
              } else {
                this.$message.error(res.msg);
              }
            });
        }
      } else if (this.titleText === "维修图片") {
        if (this.editObject.repairRecordCode) {
          this.loadFilesing = true;
          repairHistory
            .queryRepiarPicture(this.editObject.repairRecordCode)
            .then((res) => {
              if (res.code === 1) {
                let data = res.data || [];
                this.pictureList = [];
                this.pdfList = [];
                if (data) {
                  data.forEach((a) => {
                    // if (
                    //   a.pictureType === "image/png" ||
                    //   a.pictureType === "image/jpg" ||
                    //   a.pictureType === "image/jpeg"
                    // ) {
                    //   this.pictureList.push(a);
                    // }
                    if (a.pictureType === "application/pdf") {
                      a.url = this.deal(a["pictureData"]);
                      this.pdfList.push(a);
                    } else {
                      this.pictureList.push(a);
                    }
                  });
                }
                this.loadFilesing = false;
              } else {
                this.$message.error(res.msg);
              }
            });
        }
      } else if (this.titleText === "点检结果图片") {
        if (this.editObject.repairRecordCode) {
          this.loadFilesing = true;
          repairHistory
            .queryRepiarPicture(this.editObject.repairRecordCode)
            .then((res) => {
              if (res.code === 1) {
                let data = res.data || [];
                this.pictureList = [];
                this.pdfList = [];
                if (data) {
                  data.forEach((a) => {
                    // if (
                    //   a.pictureType === "image/png" ||
                    //   a.pictureType === "image/jpg" ||
                    //   a.pictureType === "image/jpeg"
                    // ) {
                    //   this.pictureList.push(a);
                    // }
                    if (a.pictureType === "application/pdf") {
                      a.url = this.deal(a["pictureData"]);
                      this.pdfList.push(a);
                    } else {
                      this.pictureList.push(a);
                    }
                  });
                }
                this.loadFilesing = false;
              } else {
                this.$message.error(res.msg);
              }
            });
        }
      }
    },
    deal(data) {
      // 获取到了blob对象
      let blob = this.base64ToBlob(data);
      // 获取当前url，直接放到iframe就能用，下载同理
      let blobURL = window.URL.createObjectURL(blob);
      return blobURL;
    },
    base64ToBlob(code) {
      // Base64一行不能超过76字符，超过则添加回车换行符。因此需要把base64字段中的换行符，回车符给去掉，有时候因为存在需要把加号空格之类的换回来，取决于base64存取时的规则。
      code = code.replace(/[\n\r]/g, "");
      var raw = window.atob(code);
      let rawLength = raw.length;
      // 转换成能直接解析的Uint8Array类型
      let uInt8Array = new Uint8Array(rawLength);
      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
      }
      return new Blob([uInt8Array], { type: "application/pdf" }); // 转成pdf类型
    },
    click(data) {
      window.open(data, "_blank");
    },
    close() {
      this.$emit("closeDialog");
    },
    cancel() {
      this.$emit("cancelDialog");
    },
  },
};
</script>

<style lang="scss" scoped>
.picture-con {
  width: 100%;
  height: auto;
}
::v-deep .el-dialog .el-dialog__body {
  max-height: 500px;
  overflow-y: auto !important;
  overflow-x: hidden;
  color: #fff;
}
.hang-font {
  width: 100%;
  font-size: 16px;
  text-align: center;
  color: #000;
}
:v-deep {
  .el-image-viewer__close {
  }
}
</style>
